<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Search - UIkit tests</title>
        <script src="../../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
        <script src="../../js/addons/autocomplete.js"></script>
        <script src="../../js/addons/search.js"></script>
        <style type="text/css">

            body.uk-container { padding-bottom: 150px; }

            .test-show {
                display: block;
                position: relative;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
            }

        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Search</h1>

            <form class="uk-search" data-uk-search="{source:'_searchautocomplete.json'}">
                <input class="uk-search-field" type="search" placeholder="search...">
            </form>

            <h2>Search in navbar</h2>

            <div class="uk-margin">

                <nav class="uk-navbar">

                    <ul class="uk-navbar-nav">
                        <li class="uk-active"><a href="">Active</a></li>
                        <li><a href="">Item</a></li>
                        <li class="uk-parent" data-uk-dropdown>
                            <a href="">Parent</a>

                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-header">Header</li>
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="#">Separated item</a></li>
                                </ul>
                            </div>

                        </li>
                    </ul>

                    <div class="uk-navbar-flip">
                        <div class="uk-navbar-content">
                            <form class="uk-search" data-uk-search="{flipDropdown:true, source:'_searchautocomplete.json'}">
                                <input class="uk-search-field" type="search" placeholder="search...">
                            </form>
                        </div>
                    </div>

                </nav>

            </div>

            <h2>Search in offcanvas</h2>

            <p>
                <button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Open</button>
            </p>

            <div id="offcanvas-1" class="uk-offcanvas">

                <div class="uk-offcanvas-bar">

                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="search...">
                    </form>

                    <div class="uk-panel">
                        <h3 class="uk-panel-title">Panel title</h3>
                        Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.
                    </div>

                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="search...">
                    </form>

                </div>

            </div>

            <h2>Dropdown and nav</h2>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">

                    <div class="test-show uk-dropdown uk-dropdown-search">

                        <ul class="uk-nav uk-nav-search">
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>
                <div class="uk-width-medium-1-4">

                    <div class="test-show uk-dropdown uk-dropdown-search">

                        <ul class="uk-nav uk-nav-search uk-nav-parent-icon" data-uk-nav>
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </body>
</html>